<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <p>
        注意，在模板中使用 ref 时，我们不需要附加 .value。
        为了方便起见，当在模板中使用时，ref 会自动解包
    </p>

    <p>
        <button @click="count++">
            Count is: {{ count }}
        </button>
    </p>

    <p>
        <button @click="increment">
            Count is: {{ count }}
        </button>
    </p>

</div>

<script>
    const {createApp, ref} = Vue

    let count = ref(0)
    console.log(count.value)
    count.value++
    console.log(count.value)

    function increment() {
        console.log(count.value)
        count.value++
        console.log(count.value)
    }

    createApp({
        setup() {
            return {
                count,
                increment
            }
        }
    }).mount('#app')
</script>
</body>
</html>